<template>
  <el-form label-width="100px">
    <!--SPU 名称-->
    <el-form-item label="SPU 名称">
      <span>{{spuName}}</span>
    </el-form-item>
    <!--SKU 名称-->
    <el-form-item label="SKU 名称">
      <el-input type="text" placeholder="请输入SKU名称" v-model="skuInfo.skuName"></el-input>
    </el-form-item>
    <!--价格(元)-->
    <el-form-item label="价格(元)">
      <el-input type="number" placeholder="请输入价格" v-model="skuInfo.price"></el-input>
    </el-form-item>
    <!--重量(千克)-->
    <el-form-item label="重量(千克)">
      <el-input type="number" placeholder="请输入重量" v-model="skuInfo.weight"></el-input>
    </el-form-item>
    <!--规格描述-->
    <el-form-item label="规格描述">
      <el-input type="textarea" placeholder="请输入规格描述" rows="4" v-model="skuInfo.skuDesc"></el-input>
    </el-form-item>
    <!--平台属性-->
    <el-form-item label="平台属性">
      <el-form inline label-width="100px">
        <!--第一个平台属性-->
        <el-form-item :label="attr.attrName" style="margin-bottom:10px" v-for="(attr,index) in attrList" :key="attr.id">
          <el-select palceholder="请选择" v-model="attr.attrIdValId">
            <el-option :label="val.valueName" :value="attr.id+'_'+val.id" v-for="(val,index) in attr.attrValueList" :key="val.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <!--销售属性-->
    <el-form-item label="销售属性">
      <el-form inline label-width="100px">
        <!--第一个平台属性-->
        <el-form-item :label="attr.saleAttrName" style="margin-bottom:10px" v-for="(attr,index) in saleAttrList" :key="attr.id">
          <el-select palceholder="请选择" v-model="attr.valueId">
            <el-option :label="val.saleAttrValueName" :value="val.id" v-for="(val,index) in attr.spuSaleAttrValueList" :key="val.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <!--图片列表-->
    <el-form-item label="图片列表">
      <el-table :data="imageList" style="width: 100%" @selection-change="handleSelectionChange" border>
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{row,$index}">
            <img :src="row.imgUrl" alt="row.imgName" width="100" height="100" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row,$index}">
            <el-tag type="success" v-if="row.isDefault==='1'">默认</el-tag>
            <el-button type="primary" size="mini" v-else @click="setDefault(row)">设为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!--两个按钮-->
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="back">取消</el-button>
    </el-form-item>

  </el-form>
</template>
<script>
export default {
  name: 'SkuForm',
  data() {
    return {
      skuInfo: {
        skuName: '', // sku的名称
        price: '', // 价格
        weight: '', // 重量
        skuDesc: '', // 描述信息
        skuAttrValueList: [], // 平台属性数组数据
        skuSaleAttrValueList: [], // 销售属性数组
        skuImageList: [], // 图片列表数组
        isSale: 0, // 是否上架的标识(添加了sku之后,该sku是否会在前台的页面中直接显示)
        skuDefaultImg: '', // 设置为默认的图片的地址(前台电商项目中/search路由对应的界面中,商品列表中显示的默认的图片)
        spuId: 0, // skuInfo对象最终向哪个spuInfo对象中的添加啊? 需要spuId
        tmId: 0, // 当前的sku也是属于某个spuInfo对象的,那么也需要对应的品牌
        category3Id: 0 // 三级分类的id
      },
      spuName: '', // spu对象的名字
      category1Id: '', // 一级分类的id
      category2Id: '', // 二级分类的id
      attrList: [], // 平台属性数组
      saleAttrList: [], // 销售属性数组
      imageList: [], // 图片列表数组
      selectedImageList: [] // 用来存储选中的图片
    }
  },

  methods: {
    back() {
      this.$emit('cancel')
    },

    // 为了添加sku对象,初始化数据的回调
    initAddData(spuInfo) {
      this.spuName = spuInfo.spuName // 保存spu对象的名字
      this.skuInfo.spuId = spuInfo.id // 保存spu对象的id
      this.skuInfo.tmId = spuInfo.tmId // 保存spu对象的品牌id
      // 保存一级/二级/三级分类的id
      this.category1Id = spuInfo.category1Id
      this.category2Id = spuInfo.category2Id
      this.skuInfo.category3Id = spuInfo.category3Id
      // 调用方法,获取平台属性数据/销售属性数据/图片列表数据
      this.getInitData()
    },
    // 初始化数据的方法(平台属性数据/销售属性数据/图片列表数据)
    async getInitData() {
      // 解构数据
      const {
        category1Id,
        category2Id,
        skuInfo: { category3Id, spuId }
      } = this
      // 获取平台属性
      const promise1 = await this.$API.attr.getAttrInfoList(
        category1Id,
        category2Id,
        category3Id
      )
      // 获取销售属性
      const promise2 = await this.$API.sku.getSpuSaleAttrList(spuId)
      // 获取图片列表数据
      const promise3 = await this.$API.sku.getSpuImageList(spuId)
      // 统一处理promise
      const result = await Promise.all([promise1, promise2, promise3])

      // 存储平台属性
      this.attrList = result[0].data
      // 存储销售属性
      this.saleAttrList = result[1].data
      // 存储图片数据
      const imageList = result[2].data
      imageList.forEach((item) => {
        item.isDefault = '0'
      })
      // 第一图片设置为默认的
      imageList[0].isDefault = '1'
      // 我愿意
      this.imageList = imageList
    },
    // 设置某个图片为默认的图片
    setDefault(img) {
      // 图片数组中每个图片对象都不是默认图片了
      // isDefault 不是响应式的属性
      this.imageList.forEach((item) => {
        item.isDefault = '0'
      })
      // 当前的这个图片设置为默认图片
      img.isDefault = '1'
      // 把当前选中的图片的地址存储起来
      this.skuInfo.skuDefaultImg = img.imgUrl
    },
    // 多选图片的表格所需要的事件的回调函数
    handleSelectionChange(val) {
      // 更新存储图片的数组
      this.selectedImageList = val
    },
    // 添加sku对象操作
    async save() {
      // 1.解构相关数据,进行过滤操作
      // skuInfo对象,选中的图片数组,平台属性,销售属性
      const { skuInfo, selectedImageList, attrList, saleAttrList } = this
      // 先过滤平台属性数据
      skuInfo.skuAttrValueList = attrList.reduce((pre, item) => {
        // 先获取当前选中的平台属性
        const attrIdValId = item.attrIdValId
        // 判断
        if (attrIdValId) {
          // 解构出平台属性对象id,和对应的属性值的id
          const [attrId, valueId] = attrIdValId.split('_')
          // 把对象保存到数组中
          pre.push({
            attrId,
            valueId
          })
        }
        // 置空
        item.attrIdValId = ''
        return pre
      }, [])
      // 过滤销售属性数据
      skuInfo.skuSaleAttrValueList = saleAttrList.reduce((pre, item) => {
        const valueId = item.valueId
        // 判断是否选中
        if (valueId) {
          pre.push({
            saleAttrValueId: valueId
          })
        }
        // 清理的是每一个
        item.valueId = ''
        return pre
      }, [])
      // 过滤图片列表数据
      skuInfo.skuImageList = selectedImageList.map((item) => ({
        imgName: item.imgName,
        imgUrl: item.imgUrl,
        isDefault: item.isDefault,
        spuImgId: item.id
      }))

      try {
        await this.$API.sku.addOrUpdateSkuInfo(skuInfo)
        // 提示信息
        this.$message.success('操作成功')
        // 关闭当前窗口
        this.$emit('cancel')
        // 成功后需要刷新spuInfo列表数据
        this.$emit('saveSuccess')
        // 重置数据(当前组件的数据都不需要了)
        this.resetData()
      } catch (error) {
        this.$message.error(error.message || '操作失败')
      }
    },
    // 重置数据
    resetData() {
      this.skuInfo = {
        skuName: '', // sku的名称
        price: '', // 价格
        weight: '', // 重量
        skuDesc: '', // 描述信息
        skuAttrValueList: [], // 平台属性数组数据
        skuSaleAttrValueList: [], // 销售属性数组
        skuImageList: [], // 图片列表数组
        isSale: 0, // 是否上架的标识(添加了sku之后,该sku是否会在前台的页面中直接显示)
        skuDefaultImg: '', // 设置为默认的图片的地址(前台电商项目中/search路由对应的界面中,商品列表中显示的默认的图片)
        spuId: 0, // skuInfo对象最终向哪个spuInfo对象中的添加啊? 需要spuId
        tmId: 0, // 当前的sku也是属于某个spuInfo对象的,那么也需要对应的品牌
        category3Id: 0 // 三级分类的id
      }
      this.spuName = '' // spu对象的名字
      this.category1Id = '' // 一级分类的id
      this.category2Id = '' // 二级分类的id
      this.attrList = [] // 平台属性数组
      this.saleAttrList = [] // 销售属性数组
      this.imageList = [] // 图片列表数组
      this.selectedImageList = [] // 用来存储选中的图片
    }
  }
}
</script>
<style>
</style>